<template>
  <div class="nearby-mechanism-view">
    <div class="header-container">

      <span class="title"><van-icon name="arrow-left" class="icon-van" @click="goBack" />附近机构</span>
      <div class="search-location-container">
        <img class="location-img" @click="openLocation" src="http://srhtngjmu.hn-bkt.clouddn.com/wanmai/%E4%BD%8D%E7%BD%AE.png" alt="定位图片" />
        <input v-model="searchQuery" placeholder="搜索机构/医生" @click="handleSearch" />
      </div>
    </div>
    <div class="search-location-container" style="width: 100%;height: 92px " >
    </div>
    <div v-for="(item, index) in institutions" :key="index" class="institution-item" @click="goToDetail(item)">
      <img src="icon.png" alt="机构图标" class="icon" />
      <div class="info">
        <p class="name">{{ item.name }}</p>
        <p class="distance">{{ item.distance }}km</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      institutions: [],
      searchQuery: '',
    };
  },
  mounted() {
    this.fetchInstitutions();
  },
  methods: {
    handleSearch() {
      console.log('搜索关键词:', this.searchQuery);
      this.$router.push({ path: '/input' })
    },
    openLocation() {
      console.log('打开定位');
      this.$router.push({ path: '/nearbyRegion' });
    },
    goBack() {
      this.$router.go(-1);
    },
    goToDetail(item) {
      console.log('进入详情:', item);
    },
    fetchInstitutions() {
      this.institutions = [];
    }
  }
};
</script>

<style scoped>
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}
.nearby-mechanism-view {
  background-color: #f5f9fc;
}

.icon-van{
  float: left;
  margin-left: -170px;
}

.title {

  margin: 10px auto;

}

.search-location-container {
  display: flex;
  align-items: center;
}

.location-img {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-right: 5px;
}

input {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 90%;
  height: 20px;
  float: left;
  margin-left: 20px;
  margin-right: 20px;
}

.institution-item {
  padding: 20px;
  border: 0px solid #ccc;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: auto;
  margin-top: 20px;
  width: 80%;
  background-color: #ffffff;
}

.icon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.info {
  flex: 1;
}

.name {
  margin: 0;
  font-size: 16px;
}

.distance {
  margin: 0;
  color: #666;
  font-size: 14px;
}
</style>